<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p10_2_固定定位广告条</title>
    <style>
        .top {
            background-color: #5AA4AE;
            height: 120px;
            color: #fff;
            font-size: 30px;
            /* 使用固定定位 */
            position: fixed;
            top: 0;
            /* 设置宽度为视口(view port)宽度的100% */
            width: 100vw;
        }
        .main {
            /* 让内容向下一点，不然会遮住部分文字 */
            margin-top: 130px;
        }
        .left,.right {
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left {
            background-color: #FFF799;
            left: 20px;
        }
        .right {
            background-color: #F35336;
            right: 20px;
        }
    </style>
</head>
<body>
<div class="top">我是顶部广告条</div>
<div class="left">我是左侧广告条</div>
<div class="right">我是右侧广告条</div>
<div class="main">
    我是内容
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad assumenda consectetur distinctio dolorem,
        dolores esse facere fugit id illo inventore, laudantium libero minima molestiae praesentium quis ratione sed
        voluptatem?
    </div>
    <div>Commodi cupiditate, dolores incidunt molestias nostrum odit provident? Ad culpa cupiditate eligendi esse itaque
        libero perferendis praesentium provident temporibus voluptates. Delectus dicta dolorum error itaque laboriosam
        neque praesentium, quasi voluptate.
    </div>
    <div>Consectetur cum ea excepturi ipsa ipsum necessitatibus nobis recusandae sit. A alias aliquid dolores enim
        laudantium modi quae ratione repudiandae similique sunt? Dignissimos dolorem harum natus obcaecati, quasi sed
        sit?
    </div>
    <div>Accusantium aut dignissimos laborum laudantium nam pariatur rerum soluta. Animi aperiam commodi consequatur
        consequuntur culpa eaque, enim harum hic ipsum maiores perferendis praesentium provident quibusdam quidem
        quisquam rerum suscipit voluptatibus.
    </div>
    <div>Asperiores atque ea enim eos iure, modi nesciunt officiis quibusdam recusandae tenetur unde, ut, voluptate
        voluptatum! Ab accusantium beatae debitis, dolore id libero nam pariatur quam, quibusdam quo sit tempora?
    </div>
    <div>A dolore ex ipsa praesentium quae veritatis, vero? Id mollitia possimus, quidem quisquam reiciendis voluptatem.
        Dolor eum iste laboriosam natus sint. Aperiam id ipsum molestiae molestias perspiciatis quas totam voluptate.
    </div>
    <div>Alias aspernatur assumenda at autem commodi consequatur deserunt dolore fugiat incidunt inventore ipsam labore
        libero maiores mollitia natus nobis obcaecati perferendis quam qui, quidem quisquam quos, reprehenderit totam,
        ut veniam?
    </div>
    <div>A at culpa cumque debitis delectus dolorem earum eius eligendi eos error et hic in ipsum iusto laudantium
        maxime obcaecati, odio officiis quibusdam quod repellat repellendus sequi sunt totam veritatis.
    </div>
    <div>A accusantium, amet atque cum dicta ducimus, eos expedita, fugit nisi officia praesentium sint unde?
        Accusantium alias illum inventore, ipsam modi nesciunt pariatur perferendis vero? Cupiditate dolorum ipsum
        voluptatem voluptatum.
    </div>
    <div>Accusantium deleniti dignissimos enim error fugit impedit laborum molestias necessitatibus nulla, provident
        quae reiciendis repellat sequi, velit vitae voluptatibus voluptatum? Asperiores atque autem cumque facere, fugit
        ipsa soluta temporibus voluptatum!
    </div>
    <div>Cumque, dolore eos est, inventore laudantium neque numquam obcaecati quia reiciendis repudiandae ut voluptas!
        Cupiditate distinctio facere quas ullam voluptas! Animi aperiam eveniet expedita illo pariatur ratione tempora
        vel voluptatibus!
    </div>
    <div>Dolores eum fugit inventore, ipsam minima nesciunt sit! Adipisci animi architecto, consequatur cupiditate
        exercitationem impedit inventore iure magni possimus praesentium quae quas qui quia quos recusandae repellendus
        tenetur voluptas voluptatum.
    </div>
    <div>Amet at culpa deserunt distinctio, doloremque inventore maxime minus natus necessitatibus obcaecati, quisquam
        repellat rerum voluptas. Assumenda, commodi debitis dolor illum incidunt magnam magni, maiores necessitatibus
        placeat rerum similique, voluptatum.
    </div>
    <div>Cupiditate error magni provident recusandae voluptatum! Accusantium at dicta doloribus dolorum eaque eligendi
        impedit, iure labore nobis ut. Dolores eveniet ipsa laboriosam minus modi nam neque nobis perferendis saepe
        sint.
    </div>
    <div>Assumenda deleniti earum exercitationem ipsum, iure maxime quaerat rem repellat saepe sapiente sint sit tempore
        temporibus voluptates voluptatum? Cupiditate iusto laboriosam libero modi placeat porro quaerat repudiandae sit
        suscipit, voluptates.
    </div>
    <div>Dignissimos distinctio et hic molestias neque sint vero? Aliquid expedita libero magnam, molestias reiciendis
        temporibus? Ab architecto aspernatur culpa eos excepturi id, illum inventore iure natus quae, sapiente veniam
        vero.
    </div>
    <div>Accusamus adipisci animi asperiores, beatae debitis dolore explicabo ipsam itaque natus perferendis quod,
        veritatis voluptatem. Asperiores culpa esse, numquam pariatur perferendis quibusdam quisquam voluptatem!
        Assumenda corporis dicta facilis quasi quibusdam.
    </div>
    <div>Beatae dolore, doloremque earum harum iste nihil quidem saepe? Autem dicta dignissimos eligendi enim eum
        expedita incidunt laborum numquam officia quasi quibusdam, quis reiciendis suscipit? Ad exercitationem molestias
        mollitia obcaecati!
    </div>
    <div>Commodi corporis cum dicta ea est exercitationem expedita molestias mollitia tempore! Animi consectetur
        consequuntur, dolor dolore eligendi excepturi nobis omnis pariatur quis ratione rem sint tempora tempore,
        tenetur voluptas, voluptatum?
    </div>
    <div>Consectetur dolor eaque error hic ipsa iure laborum libero nam, necessitatibus obcaecati possimus, repellendus
        repudiandae, voluptatum? Cum esse id quia! Accusantium aperiam eaque et fuga perspiciatis placeat quidem, quo
        quos?
    </div>
    <div>A ad, distinctio dolor doloremque doloribus eius et ipsam minus, necessitatibus odio odit porro quidem quo rem
        reprehenderit tempora voluptates? Asperiores at iste itaque iusto molestias mollitia qui repellendus rerum.
    </div>
    <div>Aliquam amet architecto atque consectetur delectus deserunt dolorem dolores eligendi eos expedita facere illo
        impedit, in incidunt ipsa laudantium neque nesciunt officiis optio quisquam quos similique temporibus, unde vero
        voluptatibus?
    </div>
    <div>Asperiores aspernatur assumenda aut consectetur dignissimos dolor expedita fuga fugit inventore laboriosam
        laborum magnam maxime minima molestias odio odit provident quae, quas quia quos, rem saepe soluta voluptate
        voluptatem voluptatibus.
    </div>
    <div>Dolores, eaque esse ipsum labore mollitia nostrum provident quod saepe sunt tenetur. Ab earum non unde. Iusto
        nemo, quasi. Error hic incidunt labore laborum molestiae nemo placeat reprehenderit sint voluptatibus!
    </div>
    <div>Blanditiis doloremque ipsa nihil recusandae repellat. Ab alias aspernatur, assumenda cum delectus dolores earum
        enim, error explicabo impedit iusto minima nam odit officiis, optio porro qui quisquam vitae! Error, nobis.
    </div>
    <div>Cumque delectus doloremque quam quibusdam ratione vitae voluptatibus. Ab accusamus deserunt doloremque, eius
        harum in inventore itaque iusto maiores, porro, quas quo sit. Beatae fugit in neque quos sint tenetur.
    </div>
    <div>Aliquid consectetur cumque error illo libero sint, veniam. Aperiam corporis cupiditate deleniti ducimus iusto,
        minus neque nisi nulla provident quisquam recusandae rerum, sed sint suscipit velit veritatis voluptas.
        Corporis, tempora?
    </div>
    <div>Architecto facere, quas. A aliquam consectetur corporis debitis doloremque incidunt ipsa ipsum iusto laboriosam
        maiores molestias nihil nobis non pariatur porro, praesentium quaerat quia quibusdam ratione soluta. Amet,
        facilis maiores.
    </div>
    <div>Adipisci aliquid aperiam atque delectus dolor ea eius enim fuga labore laboriosam minima odio odit provident
        quam, quidem saepe soluta. Deleniti ducimus et in odit quas quasi quisquam repudiandae vel.
    </div>
    <div>Ab aliquid architecto consequuntur corporis eveniet excepturi in iusto laborum, laudantium libero, molestiae
        mollitia nemo nihil nobis odit pariatur praesentium, quaerat quasi quo rem sequi similique soluta unde veritatis
        voluptatem.
    </div>
    <div>Error facilis maxime repellendus reprehenderit tempore, tenetur ullam? Accusamus atque dolorum eveniet mollitia
        quaerat quidem repellendus! Aut, autem dolorem earum eius excepturi fugit placeat quo recusandae sunt, tempora
        veniam vitae!
    </div>
    <div>Enim fugiat itaque, laudantium porro quas quisquam tempore! A adipisci atque cumque, eos expedita iste, iusto
        minima molestiae placeat quam, quia vitae voluptatibus. Doloribus et minima quidem sed unde vitae.
    </div>
    <div>A atque, cum cumque cupiditate est illo molestiae, nam nihil pariatur provident, sint velit! Ipsam neque
        officiis quam quibusdam quos! Alias doloribus esse et explicabo nesciunt quis rerum sit velit.
    </div>
    <div>Ad consequatur dolores error ex ipsam pariatur perferendis quae, quidem quos ullam! Amet aspernatur consequatur
        eaque facere, nulla perspiciatis quidem reiciendis vel? Architecto excepturi fuga nam quaerat similique suscipit
        temporibus.
    </div>
    <div>Aspernatur atque, aut consectetur doloribus ea error exercitationem facilis hic inventore molestiae,
        necessitatibus odit quas quis ratione, rerum voluptas voluptatem voluptates. Ad atque ducimus id inventore nulla
        porro quas vel?
    </div>
    <div>Assumenda culpa dicta dolores ducimus eius eveniet exercitationem facere, illo labore molestiae necessitatibus
        nulla, obcaecati porro quo, tenetur totam unde veritatis vero! Adipisci deleniti, ex nulla quasi quisquam rem
        vitae.
    </div>
    <div>Accusantium ad architecto consequatur earum esse minus molestiae, odio sunt. Error tempora, velit. Ducimus ea,
        excepturi? A aliquam consectetur consequuntur, facilis fuga, fugit itaque minus odio, repudiandae sequi sit ut.
    </div>
    <div>Adipisci commodi cumque, delectus deserunt laboriosam possimus quibusdam ratione voluptatum. A, architecto
        commodi error ipsa quibusdam quis soluta totam. Ab, ad debitis non numquam obcaecati voluptate! Doloremque
        nesciunt non possimus!
    </div>
    <div>Accusamus deserunt error et ipsam ipsum quos similique! Accusantium beatae consectetur corporis deleniti, dolor
        doloribus ea facilis fugiat illo inventore laboriosam, obcaecati quam quasi quia saepe, soluta tenetur ullam
        unde.
    </div>
    <div>Ab at corporis excepturi explicabo reiciendis repellendus, sunt tempora. Amet cumque cupiditate fugit illum
        labore laborum minus! Impedit in magni nobis. Et iure laborum laudantium mollitia nostrum saepe similique
        tempore.
    </div>
    <div>Amet, commodi consectetur consequuntur cum distinctio eaque eius eos ex illum laboriosam minus neque nobis non
        porro quasi qui quisquam quos recusandae rem rerum soluta sunt ullam unde velit vero!
    </div>
    <div>Cumque dolorum id inventore ipsum magni neque non quia quibusdam quis veritatis. Ab accusamus architecto
        aspernatur atque cum, deleniti fuga hic ipsa iste labore nam nobis nulla quae ratione, vero?
    </div>
    <div>Accusantium, ad adipisci aliquid consectetur cumque delectus, deserunt ducimus ea esse ex fugit ipsum iure,
        libero maiores molestias nulla placeat praesentium quae quisquam quod quos ratione rerum sunt veniam voluptatum!
    </div>
    <div>Atque culpa cupiditate eos in nemo non sapiente vero! Perspiciatis quia, sint? Delectus deserunt dicta dolorem,
        dolores excepturi maiores minima perspiciatis porro. At delectus distinctio ipsa iure placeat porro quia.
    </div>
    <div>Accusantium amet animi aperiam assumenda deserunt dicta dolorem dolores doloribus dolorum earum eveniet fugit,
        id illo in laborum magni, molestiae nesciunt non qui quia ratione, sapiente sit soluta tenetur unde.
    </div>
    <div>Fuga impedit perspiciatis similique vero voluptas! A, ad animi autem consequatur, corporis dolores earum
        eligendi error id ipsa laudantium libero nam nisi quae quam, quasi quibusdam quo ratione tempora vitae?
    </div>
    <div>Autem, fugiat nemo numquam porro provident quasi quidem quisquam ullam? Cumque dignissimos nihil obcaecati
        reiciendis. Ab aliquid eaque excepturi iure obcaecati perferendis possimus? Consequatur culpa, ducimus illo
        ipsum mollitia saepe?
    </div>
    <div>Amet asperiores at corporis dicta dolores eaque eligendi illum repellendus rerum sit! Aspernatur consequuntur,
        doloremque, eaque eligendi est inventore magnam minus molestias nam officiis provident quisquam sit.
        Perferendis, quaerat, sequi.
    </div>
    <div>Alias amet illo ipsam perspiciatis quod repellendus repudiandae sed vitae voluptatibus voluptatum. A culpa,
        delectus distinctio et fuga in odio quis ratione sunt vero? Aperiam magni necessitatibus officia quidem rerum?
    </div>
    <div>Aliquid cum eius eligendi eos labore molestiae, nostrum quod tempora vel voluptates? Animi architecto commodi
        ex expedita, harum iste nesciunt nisi nostrum perferendis, placeat provident quisquam quod soluta unde vel.
    </div>
    <div>Accusamus consectetur consequuntur natus perferendis rem tempore! Aliquam asperiores autem consequatur cum, ea
        eaque, earum eos error ex ipsa magnam modi nobis quaerat quasi repellendus suscipit vel velit voluptate,
        voluptatibus.
    </div>
    <div>Accusamus animi atque beatae cum distinctio eius hic in ipsum nam, nesciunt porro rem tempora. Aut beatae
        commodi eos harum incidunt laborum nesciunt odio, perferendis placeat quas, ullam veritatis vero?
    </div>
    <div>Debitis est facere harum laudantium minus modi nobis non nostrum obcaecati quasi reprehenderit, rerum sunt
        vero. Amet deserunt, dolorem dolorum error facilis incidunt minima minus praesentium quidem tempore velit
        voluptas.
    </div>
    <div>Adipisci aliquam animi aperiam atque deleniti, distinctio dolorem doloremque et fugiat impedit laborum
        necessitatibus obcaecati odio officiis perferendis provident, quis quo ratione recusandae sint tenetur, ullam ut
        veniam voluptas voluptatem.
    </div>
    <div>Ab aspernatur atque blanditiis consequuntur distinctio eius esse est excepturi, facilis fuga illo iste
        laudantium libero magnam minus nihil odio pariatur possimus praesentium quo sed tenetur veritatis vero
        voluptatem voluptatibus.
    </div>
    <div>Adipisci aliquid architecto consequuntur cumque cupiditate dignissimos, dolor dolores eaque eius error et
        fugiat hic id inventore iusto laboriosam minima nihil praesentium quaerat quisquam repellendus repudiandae
        velit? Illum, impedit quo.
    </div>
    <div>Atque consequatur deserunt dignissimos doloremque, dolorum error explicabo laborum magnam necessitatibus
        provident quaerat quia recusandae, repellat repudiandae sunt tenetur unde voluptate. Consequuntur dignissimos
        eaque eos ex fuga quibusdam repellendus velit?
    </div>
    <div>Harum inventore iste optio pariatur porro quae quisquam sint? Aspernatur consequatur doloremque eligendi esse
        ex hic id libero maiores, minima nemo nulla quae quas quos reiciendis reprehenderit sint sit? Quasi?
    </div>
    <div>Accusantium adipisci aperiam beatae delectus, dolores doloribus eaque eos error exercitationem, explicabo illo
        ipsam iure laborum libero molestiae nam, nostrum nulla odio odit quidem repudiandae sit soluta tempora? Sequi,
        voluptatem.
    </div>
    <div>Adipisci atque consequuntur dicta dignissimos doloremque expedita id ipsa itaque, laborum magnam minus
        molestiae nesciunt odit perspiciatis placeat porro quasi quos similique sit voluptas! Fuga harum ipsum modi nam
        saepe.
    </div>
</div>
</body>
</html>